<template>
  <div class="moviesbox">
    <div class="m-list">
      <PopularMovies />
      <Movieslist :num="num" @postdata="postdata" @finish="finish"></Movieslist>
      <p v-if="xinhao" class="foottext">已经到底了</p>
    </div>
  </div>
</template>

<script>
import PopularMovies from "./PopularMovies.vue";
import Movieslist from "./Movieslist.vue";
import BetterScroll from "better-scroll";
let bs;
export default {
  data() {
    return {
      num: 1,
      xinhao: false,
    };
  },
  components: {
    PopularMovies,
    Movieslist,
  },
  mounted() {
    this.finish();
  },
  methods: {
    finish() {
      bs = new BetterScroll(".moviesbox", {
        scrollX: false,
        scrollY: true,
        click: true,
        // 允许上拉
        pullUpLoad: {
          threshold: -500,
        },
      });
      bs.on("pullingUp", () => {
        // console.log("拉到底了");
        // 拉到底之后向movies发送可以请求数据的信号
        this.num++;
      });
    },
    // 接收子元素接受完数据后的信号
    postdata(xh) {
      // 子组件传来布尔值，用作判断是否到底
      this.xinhao = xh;
      // 刷新内容，重新计算高度
      bs.refresh();
      // 进行下次请求
      if (!xh) {
        // 下一次下拉请求
        bs.finishPullUp();
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
.moviesbox {
  position: fixed;
  top: 156px;
  left: 0;
  right: 0;
  bottom: 48px;
  overflow: hidden;
  .foottext {
    text-align: center;
    color: #666;
    font-size: @l-font;
    margin-top: 30px;
  }
}
</style>
